<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function fn1() {
        console.log('Function 1');
      }
      function fn2(f) {
        setTimeout(function(){
          console.log('Function 2');
          f();
        }, 500);
      }
      fn2(fn1);
      //Function 2
      //Function 1 
      
      function fn1() {
        console.log('Function 1');
      }
      function fn2(f) {
        // 异步
        setTimeout(function(){
          f();
        }, 500)
        // 同步
        console.log('Function 2');
      }
      fn2(fn1);
      //Function 2
      //Function 1 

      //思考下述代码的输出顺序，理解异步过程
      function fn1() {
        console.log(1);
      }
      console.log(2);
      function fn2(f) {
        console.log(3);
        // 异步
        setTimeout(function(){
          console.log(4);
          console.log(5);
          f();
          console.log(6);
        }, 500);
      }
      console.log(7);
      fn2(fn1);
      // 同步
      console.log(8);
      //2
      //7
      //3
      //8
      //4
      //5
      //1
      //6

    </script>
  </body>
</html>
